import {useEffect, useState} from "react";
import {useRequest} from 'ahooks';
import IssueApi from "@/api/IssueApi";

export default function HomePage() {
    const [todoList, setTodoList] = useState()
    const {data} = useRequest(IssueApi.getIssueList);

    function handleToggle(item, status) {
        console.log(item, status)
        if (status) {
            item.status = 1;
        } else {
            item.status = 0;
        }
    }

    useEffect(() => {
        if (!data) {
            console.log("get todo list api 返回值为空")
            return;
        }
        const list = data.data.data;
        setTodoList(list.map(item => (
            <li key={item.id}>
                <input
                    type="checkbox"
                    checked={item.status}
                    onChange={e => handleToggle(item, e.target.checked)}
                />
                <span style={{textDecoration: item.status ? 'line-through' : 'none'}}>
              {item.name}
            </span>
            </li>
        )))
    }, [data]);
    return (
        <div>
            <h2>代办清单</h2>
            <ul>
                {todoList}
            </ul>
        </div>
    );
}
